<template name="citySelect">
	<view>
		<!-- <statusBar></statusBar>
		<view class="srcrchGroup">
			<text class="iconfont icon-back" @tap="pBack"></text>
			<view class="serarchInput">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="输入城市名" @focus="searchFocus" @blur="searchBlur" />
			</view>
		</view> -->
		<ttBar title="选择城市" leftIcon="icon-back"></ttBar>
		<view class="cityCnt" v-if="!isSearch">
			<scroll-view class="shenfenView" scroll-y="true" :style="{height:scTop+'px'}">
				<view class="shenfenItem " :class="[selectIndex==-1?'active':'']" @tap="showRmd"  >
					<text>推荐</text>
				</view>
				<block  v-for="(item,index) in provinceData" :key="index">
					<view class="shenfenItem" :class="[selectIndex==index?'active':'']"  @tap="changeSheng" :data-sf="item.value" :data-index="index" >
						<text>{{item.label}}</text>
					</view>
				</block>
				
			</scroll-view>
			<view class="rmdCity" v-if="isRmd">
				<view class="rmdTitle">当前定位</view>
				<view class="locationCity">
					<text class="iconfont icon-locationfill"></text>
					<text class="locationName">{{nowCity}}</text>
				</view>
				<view class="rmdTitle">最近访问</view>
				<view class="cityBox">
					<block v-if="cityHistory&&cityHistory.length>0">
						<text v-for="(item,index) in cityHistory" :key="index">{{item}}</text>
					</block>
					<block v-else>
						<text>无</text>
					</block>
				</view>
				<view class="rmdTitle">热门城市</view>
				<view class="cityBox">
					<text @tap="selectCity" data-citycode="1101" data-city="北京">北京</text>
					<text @tap="selectCity" data-citycode="3101" data-city="上海">上海</text>
					<text @tap="selectCity" data-citycode="4401" data-city="广州">广州</text>
					<text @tap="selectCity" data-citycode="4403" data-city="深圳">深圳</text>
					<text @tap="selectCity" data-citycode="5001" data-city="重庆">重庆</text>
					<text @tap="selectCity" data-citycode="1201" data-city="天津">天津</text>
					<text @tap="selectCity" data-citycode="3201" data-city="南京">南京</text>
					<text @tap="selectCity" data-citycode="3301" data-city="杭州">杭州</text>
					<text @tap="selectCity" data-citycode="5101" data-city="成都">成都</text>
					<text @tap="selectCity" data-citycode="4201" data-city="武汉">武汉</text>
					<text @tap="selectCity" data-citycode="6101" data-city="西安">西安</text>
					<text @tap="selectCity" data-citycode="4301" data-city="长沙">长沙</text>
				</view>
			</view>
			<scroll-view class="cityView" :style="{height:scTop+'px'}" v-if="!isRmd">
				<view class="cityBox">
					<text v-for="(item,index) in cityList" :key="index" :data-citycode="item.value" :data-city="item.label" @tap="selectCity">{{item.label}}</text>
				</view>
				
			</scroll-view>
		</view>
		<scroll-view v-if="isSearch"  class="searchView" :style="{height:scTop+'px'}" >
			<!-- 搜索结果 -->
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	import statusBar from "../statusBar/statusBar.vue";
	import provinceData from "./city-data/province.js";
	import city from "./city-data/city.js";
	export default {
		components: {
			statusBar
		},
		computed: {
			...mapState({
				initInfo: state => state.sys.initInfo
			})
		},
		name: 'citySelect', //组件名称
		// 传递参数
		props: {
			nowCity: {
				type: String,
				default: ''
			}
		},
		// 组件参数
		data() {
			return {
				scTop: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(90),
				isSearch: false,		//显示搜索结果
				isRmd: true,			//显示推荐
				selectSheng: '推荐',		//选中省份
				searchText:'',		//搜索文字
				provinceData:provinceData,
				city:city,
				selectIndex:-1,
				cityList:[],
				cityHistory:uni.getStorageSync("cityHistory")
			}
		},
		// 组件方法
		methods: {
			// 点击左侧省份切换
			changeSheng(e) {
			
				let _select=e.currentTarget.dataset.sf;
				let _index=parseInt(e.currentTarget.dataset.index);
				this.isRmd=false
				this.selectIndex=_index;
				this.cityList=this.city[_index]
			},
			// 搜索框获取到焦点
			searchFocus(){
				this.isSearch=true
			},
			// 搜索框失去焦点
			searchBlur(){
				this.isSearch=false
			},
			// 显示推荐
			showRmd(){
				this.isRmd=true
				this.selectIndex=-1;
			},
			// 选择城市
			selectCity(e){
				let _cityCode=parseInt(e.currentTarget.dataset.citycode) 
				let _city=e.currentTarget.dataset.city;
				
				if(this.initInfo.open_city.indexOf(_cityCode)>-1){
					this.$store.commit("selectCity",{
						cityName: _city,
						cityCode: _cityCode,
					})
					uni.navigateBack()
				}else{
					uni.showToast({
						title: '该城市暂未开通，敬请期待',
						icon: 'none'
					});
				}
			}
		},
	}
</script>

<style lang="less">
	@import "../../common/public.less";

	.srcrchGroup {
		display: flex;
		height: 90upx;
		padding: 0 18upx;
		line-height: 90upx;
		align-items: center;

		>.iconfont {
			padding: 0 10upx;
			font-size: 42upx;
			margin-right: 20upx;
		}

		.serarchInput {
			display: flex;
			height: 60rpx;
			border-radius: 30rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			flex-grow: 1;
			background-color: #F7F7F7;
			padding: 0 24upx;

			input {
				margin-left: 16upx;
				font-size: 28upx;
			}
		}
	}

	.cityCnt {
		display: flex;

		.shenfenView {
			width: 25%;
			background-color: #EFEFEF;

			.shenfenItem {
				text-align: center;
				height: 100upx;
				
				display: flex;
				align-items: center;

				text {
					display: block;
					width: 100%;
					font-size: 32upx;
					box-sizing: border-box;
					border-left: 5px solid #EFEFEF;
					padding-right: 5px;
					overflow: hidden;
					text-overflow: ellipsis;
						white-space: nowrap;
				}
			}

			.active {
				background-color: #FFFFFF;

				text {
					border-left: 5px solid @color-m;
				}
			}
		}

		.cityView {
			width: 75%;	
		}
		.cityBox{
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
			padding:0 28upx ;
			text{
				display:inline-block;
				// min-width: 21%;
				width: 30%;
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				font-size: 28upx;
				background-color: #EFEFEF;
				margin-bottom: 20upx;
				margin-right: 16upx;
				border-radius: 10upx;
				overflow: hidden;
				text-overflow: ellipsis;
					white-space: nowrap;
			}
		}
		
		.rmdCity{
			width: 75%;
			display: flex;
			flex-direction: column;
			.rmdTitle{
				padding: 10upx 28upx;
				font-size: 30upx;
				color: #404040;
			}
			.locationCity{
				padding: 20upx 0;
				font-size: 32upx;
				margin-bottom: 20upx;
				margin-left: 28upx;
				.iconfont{
					color: @color-m;
					margin-right: 10upx;
				}
			}
		}
	}
</style>
